<template>
  <section class="upload-info-section">
    <section class="common-text-block-section">
      <div class="title-section">
        <div class="title">建档流程</div>
      </div>
      <div class="info-wrap">
        <div class="text-section">
          <div class="progress1 progress-content">
            1.录入基本信息
          </div>
          <div class="progress2 arrow">
            <i class="el-icon-d-arrow-right"></i>
          </div>
          <div class="progress3 progress-content">
            2.录入期初值
          </div>
          <div class="progress4 arrow">
            <i class="el-icon-d-arrow-right"></i>
          </div>
          <div class="progress5 progress-content">
            3.完成建档
          </div>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
/**
 * @file 上传模块 / 客户信息纯展示模块
 */
export default {
  props: {
    status: {
      type: Number,
      default: 1,
    },
  },
  created(){
    if(this.status==0){
      document.body.style.setProperty('--backGroundColor1', '#409EFF');
      document.body.style.setProperty('--color1', 'white');
      document.body.style.setProperty('--backGroundColor3', 'white');
      document.body.style.setProperty('--color3', 'black');
    }
    if(this.status==1){
      document.body.style.setProperty('--backGroundColor1', 'white');
      document.body.style.setProperty('--color1', 'black');
      document.body.style.setProperty('--backGroundColor3', '#409EFF');
      document.body.style.setProperty('--color3', 'white');
    }
  },
  data() {
    return {};
  },
  watch:{
    status:{
      handler(newValue){
       this.status = newValue;
       if(this.status==0){
      document.body.style.setProperty('--backGroundColor1', '#409EFF');
      document.body.style.setProperty('--color1', 'white');
      document.body.style.setProperty('--backGroundColor3', 'white');
      document.body.style.setProperty('--color3', 'black');
    }
    if(this.status==1){
      document.body.style.setProperty('--backGroundColor1', 'white');
      document.body.style.setProperty('--color1', 'black');
      document.body.style.setProperty('--backGroundColor3', '#409EFF');
      document.body.style.setProperty('--color3', 'white');
    }
    },
    deep: true,
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/var.less";
.upload-info-section {
  display: flex;
  .common-text-block-section {
    flex: 1;
    margin-bottom: 0;
    .item {
      width: 49%;
    }
  }
  .common-text-block-section ~ .common-text-block-section {
    margin-left: 10px;
  }
  .iconfont::before {
    color: @color-grey-low;
  }
  .upload-info-section {
    display: flex;
    .left,
    .right {
      flex: 1;
    }
    .left span {
      font-size: 14px;
      &.bank {
        color: @color-error;
      }
      &.uploaded {
        color: @color-green;
      }
    }
  }
}
.text-section {
  flex: 1;
}
.info-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-item{
  font-family: PingFang SC, Helvetica Neue, Helvetica, sans-serif;
  font-size: 16px;
}
.progress1, .progress2, .progress3, .progress4, .progress5{
        // background: white;
        float: left;
        width: 150px;
        height: 60px;
        line-height: 60px;/*让黄色div中的文字内容垂直居中*/
        text-align: center;/*让文字水平居中*/
}

.progress1{
  background-color: var(--backGroundColor1);
  color:var(--color1);
}

.progress3{
  background-color: var(--backGroundColor3);
  color:var(--color3);
}
.progress-content{
  border: 1px solid rgb(221, 205, 205);
  font-size: 16px;
  border-radius: 8px;
}

.arrow{
  font-size: 40px;
}
</style>